<template>
  <div class="base-container">
    <div class="verify-container">
      <div class="title">
        <span class="sp1"></span>
        <span class="sp2">{{ titleList[activeId - 1] }}</span>
      </div>

      <div class="conpane">
        <div class="c-con">
          <div class="c-con-m">
            <div class="c-con-m-p">
              <div class="c-con-m-t">
                企业信息
              </div>
              <el-form
                label-position="right"
                label-width="220px"
                :model="formData"
                size="mini"
              >
                <el-form-item label="企业官网链接：">
                  <el-input
                    v-model="formData.link"
                    :disabled="formData.status==2"
                    placeholder="请输入官网链接"

                  ></el-input>
                </el-form-item>
                <el-form-item label="官网名称：">
                  <el-input
                    :disabled="formData.status==2"
                    v-model="formData.name"
                    placeholder="请输入官网名称"

                  ></el-input>
                </el-form-item>
                <el-form-item label="企业名称：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.companyName"
                            placeholder="请输入企业名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="法定代表人：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.owner"
                            placeholder="输入企业法人名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="注册资本：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.value"
                            placeholder="输入企业注册资本"
                  ></el-input>
                  <span> 万元人民币</span>
                </el-form-item>
                <el-form-item label="成立日期：">
                  <el-col :span="11">
                    <el-date-picker
                      :disabled="formData.status==2"
                      type="date"
                      placeholder="选择企业成立时间"
                      v-model="formData.establishedTime"
                      style="width: 100%;"
                    ></el-date-picker>
                  </el-col>
                </el-form-item>
                <el-form-item label="注册地址：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.rAddress"
                            placeholder="请输入公司注册地址"
                  ></el-input>
                </el-form-item>
                <el-form-item label="办公地址：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.wAddress"
                            placeholder="请输入公司办公地址"
                  ></el-input>
                </el-form-item>
                <el-form-item label="公司电话：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.phone"
                            placeholder="请输入公司电话"
                  ></el-input>
                </el-form-item>
                <el-form-item label="公司邮箱：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.email"
                            placeholder="请输入公司邮箱"
                  ></el-input>
                </el-form-item>
                <el-form-item label="营业执照：">
                  <el-input :disabled="formData.status==2"
                            placeholder=""
                            v-model="formData.licence"
                            @change="(value) => {changeFile(1, value);}"
                            accept="image/jpeg,image/jpg,image/png"
                            type="file"
                            class="ip-file1"
                  ></el-input>
                  <div
                    style="cursor: pointer;z-index: 1; width: 140px;position: relative;"
                  >
                    <img
                      v-if="fileImg1.length < 5"
                      style="width: 140px; "
                      src="../../assets/verify/upimg1.png"
                      fit="fill"
                      @click="selectImg(1)"
                    />
                    <img
                      v-else
                      style="width: 260px; "
                      :src="fileImg1"
                      fit="fill"
                    @click="lookImg(fileImg1)"
                    />
                  </div>
                  <el-dialog
                    title="正常照片示例"
                    :visible.sync="dialogTableVisible"
                  >
                    <div>
                      <!--src="@/assets/verify/yyzz.png"-->
                      <div>-->
                          <img v-if="dialogImg.indexOf('yyzz')>=0"
                             :src="require('../../assets/verify/yyzz.png')"
                            style="width: 100%;"
                          />
                          <img v-else
                          :src="dialogImg"
                          style="width: 100%;"
                          />
                          </div>
                    </div>
                  </el-dialog>
                </el-form-item>

                <div class="c-con-m-t">联系人信息</div>
                <el-form-item label="联系人姓名：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.cName"
                            placeholder="请输入姓名"
                  ></el-input>
                </el-form-item>

                <el-form-item label="联系人手机号码：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.cPhone"
                            placeholder="请输入手机号码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="联系人邮箱：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.cEmail"
                            placeholder="请输入邮箱地址"
                  ></el-input>
                </el-form-item>

                <el-form-item label="联系人身份证：">
                  <el-input :disabled="formData.status==2"
                            v-model="formData.cardFront"
                            placeholder="身份证正面"
                            type="file"
                            class="ip-file2"
                            @change="
                      value => {
                        changeFile(2, value);
                      }
                    "
                            accept="image/jpeg,image/jpg,image/png"
                  ></el-input>
                  <el-input :disabled="formData.status==2"
                            v-model="formData.cardBack"
                            placeholder="身份证反面"
                            type="file"
                            class="ip-file3"
                            @change="
                      value => {
                        changeFile(3, value);
                      }
                    "
                            accept="image/jpeg,image/jpg,image/png"
                  ></el-input>

                  <img
                    v-if="fileImg2.length < 5"
                    style="width: 140px; cursor: pointer;z-index: 1;position: relative;"
                    src="../../assets/verify/upimg2.png"
                    fit="fill"
                    @click="selectImg(2)"
                  />
                  <img
                    v-else
                    style="width: 140px; cursor: pointer;z-index: 1;position: relative;"
                    :src="fileImg2"
                    fit="fill"
                    @click="lookImg(fileImg2)"
                  />

                  <img
                    v-if="fileImg3.length < 5"
                    style="width: 140px; cursor: pointer;margin-left: 1rem;z-index: 1;position: relative;"
                    src="../../assets/verify/upimg2.png"
                    fit="fill"
                    @click="selectImg(3)"
                  />
                  <img
                    v-else
                    style="width: 140px; cursor: pointer;margin-left: 1rem;z-index: 1;position: relative;"
                    :src="fileImg3"
                    fit="fill"
                    @click="lookImg(fileImg3)"
                  />
                  <el-dialog
                    title="图片预览"
                    :visible.sync="dialogTableVisible"
                  >
                    <div>
                      <img v-if="dialogImg.indexOf('yyzz')>=0"
                           :src="require('../../assets/verify/yyzz.png')"
                           style="width: 100%;"
                      />
                      <img v-else
                           :src="dialogImg"
                           style="width: 100%;"
                      />
                    </div>
                  </el-dialog>
                </el-form-item>
                <el-form-item required label="审核描述：">
                  <el-input
                    type="textarea"
                    v-model="formData.mark"
                    placeholder="请输入审核描述"
                    @change="handleMarkChange"
                  >
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="c-con-m" style="text-align: center;margin: 2rem 0;">
            <div style="text-align: center;">
              <el-button v-if="formData.status==2"
                         type="primary"
                         style="width:8rem;"
                         :disabled="(!formData.mark)||formData.mark.length<1"
                         size="small"
                         @click="next(1)"
              >审核通过
              </el-button>
              <el-button v-if="formData.status==2"
                         type="danger"
                         style="width:8rem;"
                         size="small"
                         @click="next(2)"
                         :disabled="(!formData.mark)||formData.mark.length<1"
              >不通过
              </el-button>

              <el-button v-if="formData.status>2"
                         type="primary"
                         style="width:8rem;"
                         size="small"
                         disabled
              >{{formData.status==3?"已通过":"认证失败"}}
              </el-button>
              <el-button
                type="info"
                style="width:8rem;"
                size="small"
                @click="next(3)"
              >取消
              </el-button>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {validUsername} from "@/utils/validate";
  import {trace} from "../../utils/trace";
  import {getFileUrl} from "../../utils"
  import {upFile} from "../../api/file"
  import {  verify } from '../../api/verify'
  import xStep from "../../components/xStep/xStep"
  import {isNull} from "../../utils/tools"

  export default {
    components: {xStep},
    name: "verify-detail",
    data() {
      return {
        pickerBeginDateBefore: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        timeDefaultShow: "",
        id: null,
        navItems: [
          {title: "企业认证", path: "/index"},
          {title: "站点管理", path: "/site"},
        ],
        list: [
          "输入认证信息",
          "申请认证",
          "提交认证",
        ],
        isInputMarkContent:false,
        loading: false,
        titleList: ["企业信息认证", "申请认证", "提交认证"],
        dialogTableVisible: false,
        dialogImg: "",
        activeId: 1,
        fileImg1: "",
        fileImg2: "",
        fileImg3: "",
        formData: {
          status: 1,   //1 初始  2 进行中  3 通过  4 失败
          agreement: false,
          fee: 100,
          link: "",
          name: "",
          companyName: "",
          owner: "",
          value: "",
          rAddress: "",
          wAddress: "",
          phone: "",
          email: "",
          cName: "",
          cPhone: "",
          cEmail: "",
          establishedTime: "",
          licence: "",
          cardFront: "",
          cardBack: "",
          mark:""
        }
      };
    },

    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    computed: {
      activeIndex() {
        let navItem = this.navItems.find(item => {
          return this.$route.path.indexOf(item.path) != -1;
        });
        return "/verify" + navItem.path;
      }
    },
    methods: {
      handleMarkChange(val){

        this.isInputMarkContent = val.trim().length > 0

      },
      // hkSetUp(status) {     //管理员审核服务
      //   let {id} = this.pro_value;
      //   let mark = this.formData.mark;
      //   // let status = 3;   //2 fail ; 3 success
      //   this.$store.dispatch('promote/seoAudit', {id, mark,status}).then((data) => {
      //     trace("seoAudit-启用推广-data", data);
      //     this.$bus.emit("hiddenKey",1);
      //   })
      //     .catch((err) => {
      //       trace("启用广-seoAudit-err", err)
      //     })
      // },
      lookImg(value){
        this.dialogImg=value;
        this.dialogTableVisible = true
      },
      initData() {

        this.loading = true;
        this.$store.dispatch('verify/verifyDetailMe').then((data) => {
          this.setFormdata(data);
          this.loading = false;
          this.activeId = 1;
        }).catch(() => {
          this.loading = false;
          this.activeId = 1;
        })
      },
      //赋值的方法
      setFormdata: function (data) {
        for (let key in data) {
          if (this.formData[key] != null) {
            if (key == "establishedTime") {
              if (data[key] == 0) {
                this.formData[key] = (new Date()).toString()
              } else {
                this.formData[key] = (new Date(data[key])).toString()
              }
            } else if (key == "licence" || key == "cardFront" || key == "cardBack") {

            } else {
              this.formData[key] = data[key];
            }
          }
        }

        if(this.formData.name=="null"||this.formData.link=="null"){
          this.formData.name="--"
          this.formData.link="--"
        }
        this.fileImg1 = data.licence || "";
        this.fileImg2 = data.cardFront || "";
        this.fileImg3 = data.cardBack || "";

      },
      changeFile: async function (id, value) {
        if (!value) return;
        var file = document.getElementsByClassName("ip-file" + id)[0].children[0];

        this["fileImg" + id] = getFileUrl(file);
        var f2 = file.files[0];

        let param = new FormData(); //创建form对象
        param.append("img", f2);
        var res = await upFile(param);

        this["fileImg" + id] = res.data.url;

      },
      handleSelect(key, keyPath) {
        this.$router.push({path: key});
      },
      pre: function () {
        this.activeId -= 1;
        if (this.activeId < 0) {
          this.activeId = 1;
        }
      },
      next: function (value) {
        if (value == 1) {
          this.setStatus(3);
        } else if (value == 2) {
          this.setStatus(4);
        } else if (value == 3) {
          this.$router.back();
        }
      },
      //更新企业认证状态
       setStatus: async function (status) {
        let id = this.id;
        let  mark=this.formData.mark
        var res = await this.$store.dispatch("verify/verifyStatu", {status, id,mark});

        if (res.code == 2000) {
          this.$router.back();
        }
      },

      lookAgreement: function (value) {
        this.$router.push({path: "/verify/agreement"});
      },
      selectImg: function (value) {

        if (this.formData.status == 2) return
        document.getElementsByClassName("ip-file" + value)[0].children[0].click();
      }
    },
    async created() {
      var query = this.$route.query;
      let id = query.id;
      this.id = id;

      if (this.id) {
        let res = await this.$store.dispatch('verify/verifyDetail', {id});
        if (res.companyName) {
          this.setFormdata(res);
          this.loading = false;
        }
      }
    },
    async mounted() {
      // this.timeDefaultShow = new Date();
      // this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
      // trace("time=",this.timeDefaultShow.toLocaleLowerCase());
    },
    beforeDestroy() {

    }
  };
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: black;
  $cursor: black;

  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .register-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .register-container {
    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        -webkit-appearance: none;
        border-radius: 5px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      /*border: 1px solid rgba(0, 0, 0, 0.3);*/
      /*background: transparent;*/
      /*border-radius: 5px;*/
      color: black;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $main_color: #134bde;

  .verify-container {
    min-height: 100%;
    // width: calc(100vw - 72px);
    background-color: $bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    border-radius: 10px;
    margin: 36px 36px 0 36px;

    .title {
      position: relative;
      width: 100%;
      background-color: white;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      line-height: 38px;
      display: flex;
      align-items: baseline;
      border-bottom: 1px solid #f0f0f0;
      padding: 5px 2rem;

      .sp1 {
        width: 4px;
        height: 19px;
        background: #134bdf;
        border-radius: 2px;
        margin-right: 10px;
      }

      .sp2 {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        line-height: 38px;
      }
    }

    .conpane {
      width: 100%;
      padding: 1rem 2rem;

      .top-step {
        background-color: rgba(237, 241, 244, 0.5);
        padding: 0.6rem;
      }

      .minLH {
        line-height: 1.5rem;
        color: #ff1f34;
      }

      .c-con {
        width: 990px;
        margin: 5px calc(50% - 495px);

        .c-con-m {
        }

        .p3 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          line-height: 38px;
        }

        .p2-text {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ff1f34;
          line-height: 38px;
        }

        .c-con-m-p {
          .ip-file1,
          .ip-file2,
          .ip-file3 {
            width: 140px;
            height: 140px;
            position: absolute;
            opacity: 0;
          }

          .c-con-m-t {
            border-bottom: 1px solid #f0f0f0;
            padding: 0 10px;
            font-size: 16px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            line-height: 38px;
            margin: 20px 0;
          }
        }
      }
    }
  }

  .verify-menu {
    text-align: center;
    background-color: white;

    .verify-menu-box {
      margin-top: 4px;
      display: inline-block;
      overflow: auto;
      border-bottom-color: #ffffff !important;
    }
  }
</style>

<style scoped>
  ::v-deep .el-input {
    width: 640px;
  }

  .el-step.is-center .el-step__line {
    left: 0%;
    right: 0;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  ::v-deep .el-dialog {
    border-radius: 10px;
    width: 1150px;
    max-width: 80%;
  }

  .decoration input {
    text-decoration: line-through;
  }
</style>
